<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/topic.css" />
	</head>

	<body>
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<div id="header">
				</div>
				<div id="frames-box">
				</div>
			</div>
		</div>

		<img id="share-btn" class="down-hide" src="img/btn_share.png" />
		<img id="get-badge-btn" class="down-hide" style="display: none;" src="img/btn_get_badge.png" />
		<img id="back-btn" class="mui-action-back down-hide" src="img/btn_back.png" />

		<div id="share" class="mui-popover mui-popover-action mui-popover-bottom">
			<img data-id="sinaweibo" data-type="sinaweibo" src="img/share_weibo.png" />
			<img data-id="qq" data-type="qq" src="img/share_qq.png" />
			<img data-id="weixin" data-type="weixin-session" src="img/share_weixin.png" />
			<img data-id="weixin" data-type="weixin-timeline" src="img/share_timeline.png" />
			<img data-id="qq" data-type="qq" class="qzone" src="img/share_qzone.png" />
			<img data-type="link" class="link" src="img/share_link.png" />
		</div>

		<div id="badge" class="mui-popover mui-popover-action mui-popover-bottom">
			<div id="badge-info">
			</div>
		</div>

		<script id="badge-info-tp1" type="text/html">
			<img id="badge-pic" src="{{ badge.pic_active }}" />
			<div id="get-badge-info">
				<p id="badge-hint">{{ badge.name }}</p>
				<p id="badge-desc">{{ badge.info }}</p>
				<p id="get-no-badge" class="get-badge">先收藏再领取</p>
				<p id="get-badge" class="get-badge" style="display: none;">立即领取</p>
			</div>
			<div id="get-gift-info" style="display: none;">
				<p id="badge-hint">{{ badge.name }}</p>
				<p id="get-badge-success">徽章领取成功</p>
				<p id="get-gift">兑换奖品</p>
			</div>
		</script>

		<script id="header-tpl" type="text/html">
			<img class="cover" src="img/grey-back.png"  data-src="{{ cover }}!pageCover" style="min-height: {{ screen_width*9/16 }}px;" onload="load(this)" />
			<p class="name">{{ name }}</p>
			<div class="count">
				<p>
					{{ each sources }} {{ if $index != 0 }}
					<span class="sep"></span> {{ /if }}
					<span class="value">{{ counts[$index] }}</span>条{{ $value }} {{ /each }}
				</p>
			</div>
			<p class="description">{{ description }}</p>
		</script>

		<script id="frames" type="text/html">
			{{ each frames }} {{ if $value.style=='standard' }}
			<div class="frame standard" data-id="{{ $value.id }}" data-cover="{{ $value.cover }}" data-name="{{ $value.title }}" data-author="{{ $value.meta_data.author }}" data-avatar="{{ $value.meta_data.avatarUrl }}">
				<div class="author" data-url="{{ $value.url }}">
					<p>
						<img src="{{ $value.meta_data.avatarUrl }}" data-src="{{ $value.meta_data.avatarUrl }}" />
						<span class="name">{{ $value.meta_data.author }}</span>
					</p>
				</div>
				<span class="img-count">{{ $value.imgs.length }}<img src="img/icon_img.png"/></span>
				<div class="cover" style="min-height: {{ $value.width*9/16 }}px;">
					{{ if $value.cover.match(/.*gif/g) }}
					<img src="img/grey-back.png" data-src="{{ $value.cover }}" onload="load(this);" /> {{ else }}
					<img src="img/grey-back.png" data-src="{{ $value.cover }}!pageCover" onload="load(this)" /> {{ /if }}
				</div>
				<div class="info" data-id="{{ $value.id }}">
					<p class="title">{{ $value.title }}</p>
					{{ if $value.text != '' }}
					<div class="rect"><span></span></div>
					<div class="text">
						<p>{{ $value.text }}</p>
					</div>
					{{ /if }} {{ if $value.liked }}
					<div class="collect">
						<span class="text like" data-id="{{ $value.id }}"><img src="img/icon_like_green.png"/><span class="value">{{ $value.rec_count }}</span></span>
					</div>
					{{ else }}
					<div class="collect">
						<span class="text" data-id="{{ $value.id }}"><img src="img/icon_like.png"/><span class="value">{{ $value.rec_count }}</span></span>
					</div>
					{{ /if }}
				</div>
			</div>
			{{ else if $value.style=='card' }}
			<div class="frame card" data-id="{{ $value.id }}" data-cover="{{ $value.cover }}" data-name="{{ $value.title }}" data-author="{{ $value.meta_data.author }}" data-avatar="{{ $value.meta_data.avatarUrl }}" data-url="{{ $value.url }}">
				<div class="author" data-url="{{ $value.url }}">
					<p>
						<img src="{{ $value.meta_data.avatarUrl }}" />
						<span class="name">{{ $value.author }}</span>
					</p>
				</div>
				<div class="cover" data-id="{{ $value.id }}" style="min-height: {{ $value.width*9/16 }}px;">
					<img class="cover" src="img/grey-back.png" data-src="{{ $value.cover }}" onload="load(this);" />
					<img class="play" src="img/icon_play.png" />
				</div>
				<div class="video">
					<video id="video-{{ $value.id }}" data-src="{{ $value.url }}" webkit-playsinline width="1" height="1" class="vplayinside notaplink" x-webkit-airplay controls loop="loop"></video>
				</div>
				<div class="info" data-id="{{ $value.id }}">
					<p class="title">{{ $value.title }}</p>
					{{ if $value.text != '' }}
					<div class="rect"><span></span></div>
					<div class="text">
						<p>{{ $value.text }}</p>
					</div>
					{{ /if }} {{ if $value.liked }}
					<div class="collect">
						<span class="text like" data-id="{{ $value.id }}"><img src="img/icon_like_green.png"/><span class="value">{{ $value.rec_count }}</span></span>
					</div>
					{{ else }}
					<div class="collect">
						<span class="text" data-id="{{ $value.id }}"><img src="img/icon_like.png"/><span class="value">{{ $value.rec_count }}</span></span>
					</div>
					{{ /if }}
				</div>
			</div>
			{{ else if $value.style=='nine' }}
			<div class="frame nine" data-id="{{ $value.id }}" data-cover="{{ $value.cover }}" data-name="{{ $value.title }}" data-author="{{ $value.meta_data.author }}" data-avatar="{{ $value.meta_data.avatarUrl }}">
				<div class="author" data-url="{{ $value.url }}">
					<p>
						<img src="{{ $value.meta_data.avatarUrl }}" data-src="{{ $value.meta_data.avatarUrl }}" />
						<span class="name">{{ $value.meta_data.author }}</span>
					</p>
				</div>
				<div class="imgs" style="min-height: {{ $value.width }}px;">
				{{ each $value.imgs.slice(0,9) as img img_index }} {{ if $value.gif_tags[img_index] }}
				<div class="img-box gif">
					<img style="min-height: {{ $value.width/3 }}px;" src="img/grey-back.png" data-src="{{ img }}!nine" onload="load(this)" />
				</div>
				{{ else if $value.long_tags[img_index] }}
				<div class="img-box long">
				<img style="min-height: {{ $value.width/3 }}px;" src="img/grey-back.png" data-src="{{ img }}!nine" onload="load(this)" />
				</div>
				{{ else }}
				<div class="img-box">
					<img style="min-height: {{ $value.width/3 }}px;" src="img/grey-back.png" data-src="{{ img }}!nine" onload="load(this)" />
				</div>
				{{ /if }} {{ /each }}
				</div>
				<div class="info" data-id="{{ $value.id }}">
					<p class="title">{{ $value.title }}</p>
					{{ if $value.text != '' }}
					<div class="rect"><span></span></div>
					<div class="text">
						<p>{{ $value.text }}</p>
					</div>
					{{ /if }} {{ if $value.liked }}
					<div class="collect">
						<span class="text like" data-id="{{ $value.id }}"><img src="img/icon_like_green.png"/><span class="value">{{ $value.rec_count }}</span></span>
					</div>
					{{ else }}
					<div class="collect">
						<span class="text" data-id="{{ $value.id }}"><img src="img/icon_like.png"/><span class="value">{{ $value.rec_count }}</span></span>
					</div>
					{{ /if }}
				</div>
			</div>
			{{ else if $value.style=='photos' }}
			<div class="frame photos" data-id="{{ $value.id }}" data-cover="{{ $value.cover }}" data-name="{{ $value.title }}" data-author="{{ $value.meta_data.author }}" data-avatar="{{ $value.meta_data.avatarUrl }}">
				<div class="author" data-url="{{ $value.url }}">
					<p>
						<img src="{{ $value.meta_data.avatarUrl }}" data-src="{{ $value.meta_data.avatarUrl }}" />
						<span class="name">{{ $value.meta_data.author }}</span>
					</p>
				</div>
				<span class="img-count">{{ $value.imgs.length }}<img src="img/icon_img.png"/></span>
				<div class="imgs" style="min-height: {{ $value.width*16/27 }}px;">
					{{ if $value.imgs.length == 2 }} {{ each $value.imgs.slice(0,2) as img img_index}}
					<img src="img/grey-back.png" data-src="{{ img }}!longPic" style="width: 49.25%;" onload="load(this);" /> {{ /each }} {{ else }} {{ each $value.imgs.slice(0,3) as img img_index}}
					<img src="img/grey-back.png" data-src="{{ img }}!longPic" onload="load(this);" /> {{ /each }} {{ /if }}
				</div>
				<div class="info" data-id="{{ $value.id }}">
					<p class="title">{{ $value.title }}</p>
					{{ if $value.text != '' }}
					<div class="rect"><span></span></div>
					<div class="text">
						<p>{{ $value.text }}</p>
					</div>
					{{ /if }} {{ if $value.liked }}
					<div class="collect">
						<span class="text like" data-id="{{ $value.id }}"><img src="img/icon_like_green.png"/><span class="value">{{ $value.rec_count }}</span></span>
					</div>
					{{ else }}
					<div class="collect">
						<span class="text" data-id="{{ $value.id }}"><img src="img/icon_like.png"/><span class="value">{{ $value.rec_count }}</span></span>
					</div>
					{{ /if }}
				</div>
			</div>
			{{ else if $value.style == 'simple' }}
			<div class="frame simple" data-id="{{ $value.id }}" data-cover="{{ $value.cover }}" data-name="{{ $value.title }}" data-author="{{ $value.meta_data.author }}" data-avatar="{{ $value.meta_data.avatarUrl }}">
				<div class="author" data-url="{{ $value.url }}">
					<p>
						<img src="{{ $value.meta_data.avatarUrl }}" data-src="{{ $value.meta_data.avatarUrl }}" />
						<span class="name">{{ $value.meta_data.author }}</span>
					</p>
				</div>
				<div class="cover" data-preview-src="{{ $value.cover }}" style="min-height: {{ $value.width*9/16 }}px;">
					{{ if $value.cover.match(/.*gif/g) }}
					<img src="img/grey-back.png" data-src="{{ $value.cover }}" onload="load(this);" />
					<span class="gif-tag">GIF</span> 
					{{ else if $value.is_long }}
					<img src="img/grey-back.png" data-src="{{ $value.cover }}!bigCover" onload="load(this);" /> 
					<span class="long-tag">长图</span>
					{{ else }}
					<img src="img/grey-back.png" data-src="{{ $value.cover }}!simple" onload="load(this);" /> 
					{{ /if }}
					<img class="shadow" src="{{ $value.imgs[0] }}" data-preview-src="{{ $value.imgs[0] }}" data-preview-group="{{ $value.id }}" />

				</div>
				<p class="title">{{ $value.title }}</p>

				{{ if $value.liked }}
				<div class="collect">
					<span class="text like" data-id="{{ $value.id }}"><img src="img/icon_like_green.png"/><span class="value">{{ $value.rec_count }}</span></span>
				</div>
				{{ else }}
				<div class="collect">
					<span class="text" data-id="{{ $value.id }}"><img src="img/icon_like.png"/><span class="value">{{ $value.rec_count }}</span></span>
				</div>
				{{ /if }} 
			</div>
			{{ /if }} {{ /each }}
		</script>
		<script src="js/template.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/av-mini.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.js"></script>
		<script src="js/md5.min.js"></script>
		<script src="js/imgload.js"></script>
		<script src="js/topic.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>